Contextual Menus: Delivering Relevant Tools for Tasks上下文選單

上下文選單是按需顯示的選單，包含與介面中的某個控制元件、內容、檢視或區域相關的一小組操作。精心設計的上下文選單能為任務提供相關工具，而不增加介面負擔。

有了合適的工具，使用者可以高效完成任務。反之，如果缺少相關工具或工具過多，使用者會感到迷惑或浪費時間尋找合適選項。上下文選單透過關聯任務和命令，縮小可用命令範圍，幫助使用者更輕鬆完成任務。

什麼是上下文選單 (What is a Contextual Menu?)

定義：上下文選單是一種選單，它基於使用者的選擇或操作按需顯示，包含與任務或介面區域相關的小部分操作。通常情況下，這些選單與當前選擇內容、控制元件或應用檢視相關聯。

示例 Microsoft Word：

透過上下文選單提供一小組相關操作，能夠降低使用者的互動成本和認知負擔，避免使用者在主選單中尋找命令或頻繁返回工具欄。

上下文選單適用於桌面和移動裝置的多種作業系統，但其設計需根據裝置型別和系統特性做出調整。

上下文選單的觸發方式 (Triggers for Revealing Contextual Menus)

上下文選單通常不會由固定的 UI 元素觸發，而是根據使用者的操作出現在點選、輕觸或滑動的位置附近。以下是常見的觸發方式：

桌面裝置

右鍵點選滑鼠

按住 Control 鍵並點選滑鼠

在觸控板上雙指點選

移動裝置

輕觸圖示或可視元素

橫向滑動

長按（按住一段時間）

3D Touch（iOS）

選單選項應在所有觸發方式中保持一致，確保使用者無論使用何種操作都能獲得相同的結果。

設計有效上下文選單的建議 (Tips for Effective Contextual Menus)

1.僅包含與任務相關的選項

選單中的選項應與當前任務直接相關，不應包含全域性命令。例如：

在OneNote中，選擇筆記後的上下文選單僅顯示編輯相關命令（如貼上、插入連結），而不會顯示全域性命令（如儲存或列印）。

2.確保主選單中也能訪問這些命令

上下文選單中的命令應在主導航選單中有對應選項，以便使用者在未發現上下文選單時仍能找到操作。例如：Photoshop在圖層面板和主導航選單中提供一致的圖層操作。

3.透過視覺元素提示選單的存在

新增視覺提示（如省略號或向下箭頭）幫助使用者發現上下文選單。例如：

Google Photos使用水平省略號按鈕提示使用者可訪問的相關命令。

Windows使用向下箭頭按鈕顯示與使用者個人資料相關的上下文選單。

4.為隱藏選單提供輔助提示

對於依賴手勢觸發的上下文選單，應提供替代方法。例如：

iOS 郵件應用在郵件底部提供冗餘命令，使用者既可透過滑動觸發操作，也可點選命令欄。

5.避免使用容易混淆的圖示

避免使用齒輪圖示或漢堡選單觸發上下文選單，因為使用者通常將這些圖示與全域性選單或設定選單關聯。例如：Quip使用齒輪圖示觸發上下文選單，但容易被誤認為全域性設定選單。

6.限制子選單的使用

子選單容易因滑鼠移動或誤操作而消失，增加使用難度。例如：

Google Sheets的“特殊貼上”命令觸發的子選單包含多個類似選項，難以掃描和選擇。

如果必須使用子選單，確保其選項數量有限，避免過多層級。

蘋果的 3D Touch 功能允許使用者按壓並按住應用程式的圖示，顯示一個單層上下文選單，其中包含與該應用程式相關的最常見操作。此選單幫助使用者快速訪問簡單的工具和命令，而無需啟動應用程式，然後再尋找那些命令。

7.按使用頻率排序命令

將常用選項置於選單頂部，減少使用者掃描時間。例如：YouTube 上推薦影片的上下文選單在長按後出現；如果使用者點選操作溢點陣圖示，也會出現同樣的選單。選單選項按重要性順序呈現，如果使用者決定不採取任何行動，他們能夠輕鬆地取消任務，從而隱藏上下文選單，且他們的檢視不會有任何變化。

8.顯示快捷鍵

在上下文選單中顯示快捷鍵有助於使用者學習並提高效率。例如：

PowerPoint在選單中顯示與文字相關的快捷鍵。

9.限制選單選項數量

上下文選單應控制在 10-12 項以內，避免資訊過載。例如：

Zillow的移動應用提供了一個上下文選單，其中 9 個選項都與當前螢幕相關。

10.禁用與上下文無關的選項

對於不可用的命令，應將其置灰，而非隱藏。例如：

Evernote的側邊欄選單中，“全部筆記”無法移除，但顯示為禁用狀態，避免使用者困惑。

結論 (Conclusion)

上下文選單能為使用者提供與任務相關的快捷工具，降低認知負擔和互動成本。但設計者需確保選單選項簡潔、任務聚焦，並提供視覺提示以提升可發現性。同時，使用者應始終能夠透過主導航訪問相同的命令，以確保一致性和可用性。